<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>普通用户</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f9f9f9; /* 背景色 */
            color: #333;
            margin: 0;
            padding: 20px;
        }
        h1 {
            text-align: center;
            color: #044599;
            margin-bottom: 20px;
        }
        form {
            text-align: center;
            margin-bottom: 20px;
        }
        input[type="text"] {
            padding: 10px;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 4px;
            width: 300px;
            margin-right: 10px;
        }
        button {
            padding: 10px 15px;
            font-size: 16px;
            color: #fff;
            background-color: #044599;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover {
            background-color: #033a7d;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            margin: 0 auto;
        }
        table th {
            background-color: #044599;
            color: #fff;
            text-align: center;
            height: 50px;
            font-size: 16px;
        }
        table td {
            text-align: center;
            border: 1px solid #ececec;
            height: 40px;
            font-size: 14px;
            color: #333;
        }
        /* 加深斑马纹效果 */
        tr:nth-child(even) td {
            background-color: #d9d9d9; /* 深灰色 */
        }
        a {
            text-decoration: none;
            padding: 5px 10px;
            border-radius: 4px;
            transition: background-color 0.3s;
        }
        /* 借阅链接样式 */
        .borrow-link {
            color: #fff;
            background-color: #28a745; /* 绿色 */
        }
        .borrow-link:hover {
            background-color: #218838; /* 深绿色 */
        }
        /* 归还链接样式 */
        .return-link {
            color: #fff;
            background-color: #dc3545; /* 红色 */
        }
        .return-link:hover {
            background-color: #c82333; /* 深红色 */
        }
        .logout-link {
            color: #dc3545; /* 红色 */
            margin-left: 15px;
            text-decoration: none;
        }

        .logout-link:hover {
            text-decoration: underline; /* 悬停时下划线效果 */
            color: #c82333; /* 深红色 */
        }
        .alert {
            display: none;
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            padding: 15px;
            background-color: #f44336; /* 默认红色背景 */
            color: white;
            border-radius: 4px;
            z-index: 1000;
            transition: opacity 0.5s;
        }

        .alert-success {
            display: none; /* 保持和.alert一样的默认状态 */
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            padding: 15px;
            background-color: #4CAF50; /* 绿色 */
            color: white;
            border-radius: 4px;
            z-index: 1000;
            transition: opacity 0.5s;
        }
    </style>
    <script>
        function showAlert(message, isSuccess) {
            const alertBox = document.createElement('div');
            alertBox.className = isSuccess ? 'alert-success' : 'alert'; // 根据成功状态选择类名
            alertBox.innerText = message;
            document.body.appendChild(alertBox);

            // 显示提示框
            alertBox.style.display = 'block';

            // 在3秒后隐藏提示框
            setTimeout(() => {
                alertBox.style.opacity = 0;
                setTimeout(() => {
                    document.body.removeChild(alertBox);
                }, 500);
            }, 3000);
        }

        function showInitialAlerts() {
            const urlParams = new URLSearchParams(window.location.search);
            if (urlParams.has('message')) {
                const message = urlParams.get('message');
                const isSuccess = urlParams.get('success') === 'true'; // 字符串转换为 boolean
                showAlert(message, isSuccess);
            }
        }
        window.onload = showInitialAlerts; // 页面加载时调用
    </script>
</head>
<body>
<h1>图书列表</h1>

<div class="user-info">
    登录用户: <strong><%= username %></strong>（<%= role === 'admin' ? '管理员' : '普通用户' %>）
    <a href="/logout" class="logout-link">退出登录</a> <!-- 退出登录链接 -->
</div>

<!-- 查询页面 -->
<form action="/search" method="post">
    <input type="text" name="query" placeholder="按书名、作者或出版社搜索" required>
    <button type="submit">查询</button>
</form>
<br/>
<table>
    <tr>
        <th>图书编号</th>
        <th>书名</th>
        <th>作者</th>
        <th>出版社</th>
        <th>库存</th>
        <th>推荐借阅指数</th>
        <th>借阅</th>
        <th>归还</th>
    </tr>
    <% data.forEach(function (item, index) { %>
    <tr>
        <td><%= item.bookid %></td>
        <td><%= item.bookname %></td>
        <td><%= item.author %></td>
        <td><%= item.press %></td>
        <td><%= item.stock %></td>
        <td><%= item.borrow_count %></td>
        <td>
            <a href="/borrow/<%= item.bookid %>" class="borrow-link">借阅</a>
        </td>
        <td>
            <a href="/return/<%= item.bookid %>" class="return-link">归还</a>
        </td>
    </tr>
    <% }); %>
</table>
</body>
</html>